<template>
    <a-drawer v-model:open="showDrawer" class="custom-class" root-class-name="root-class-name"
        :root-style="{ color: 'blue' }" style="color: red" :title="consoleStore.oper == 'edit' ? '修改记录' : '添加记录'"
        placement="right" width="30%" @after-open-change="$afterOpenChange">
        <a-form :model="formState" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }" autocomplete="off" ref="formRef"
            @finish="onFinish" @finishFailed="onFinishFailed">
            <a-form-item label="姓名" name="name" :rules="[{ required: true, message: '请输入姓名!' }]">
                <a-input :disabled="consoleStore.oper == 'edit'" v-model:value="formState.name" />
            </a-form-item>
            <a-form-item label="姓别" name="sex" :rules="[{ required: false, message: '请输入姓别!' }]">
                <a-radio-group v-model:value="formState.sex" name="sexRadioGroup">
                    <a-radio v-for="(item, index) in colors " :key="index" :value="item">{{ item }}</a-radio>
                </a-radio-group>
            </a-form-item>
            <a-form-item label="年龄" name="age" :rules="[{ required: true, message: '请输入年龄!' }]">
                <a-input-number v-model:value="formState.age" />
            </a-form-item>
            <a-form-item label="地址" name="address" :rules="[{ required: true, message: '请输入地址!' }]">
                <a-input v-model:value="formState.address" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 4, span: 18 }">
                <a-button type="primary" html-type="submit">{{ consoleStore.oper == 'edit' ? '修改' : '添加' }}</a-button>
                <a-button style="margin-left: 10px" @click="resetForm">清空</a-button>
            </a-form-item>
        </a-form>
    </a-drawer>
</template>

<script lang="js" setup>
import { storeToRefs } from 'pinia'
import { useConsoleStore } from '@/store/store';
import { inject, watch, reactive, ref, toRefs } from 'vue';
import { message } from 'ant-design-vue';
import { $tableAdd, $tableInfo, $tableModify } from '@/api/apis/table';
import colorList from '@/hook/colorList';
// 初始化
const consoleStore = useConsoleStore();
let { showDrawer } = storeToRefs(consoleStore)


let dataModel = reactive({
    formState: {
        id: '',
        name: '',
        age: undefined,
        address: '',
        sex: '',
    },
})
let { formState } = toRefs(dataModel)


let colors = colorList()

//通过watch传递过来的tableId，查询详情
watch(
    () => consoleStore.tableId,
    (vtableId) => {
        if (vtableId) {
            $tableInfo(vtableId).then(r => {
                if (r.code == "00001") {
                    dataModel.formState = r.data
                } else {
                    message.error(r.msg);
                }
            })
        }
    })

//抽屉打开及关闭
const $afterOpenChange = (params) => {
    // 界面由修改改为添加后，清空响应的表单的数据
    if (params && consoleStore.operChange && consoleStore.oper == 'add') {
        resetForm()
    }
}

//添加或者修改
const $loadData = inject("$loadData")
const onFinish = async () => {
    if ('edit' == consoleStore.oper && consoleStore.tableId) {
        let { code, data, msg } = await $tableModify(formState.value)
        if (code == "00001") {
            resetForm()
            message.success(msg);
            $loadData()
        } else {
            message.error(msg);
        }
    }
    if ('add' == consoleStore.oper && !consoleStore.tableId) {
        let { code, data, msg } = await $tableAdd(formState.value)
        if (code == "00001") {
            resetForm()
            message.success(msg);
            $loadData()
        } else {
            message.error(msg);
        }
    }
};

const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
};

//清空
const formRef = ref();
const resetForm = () => {
    formRef.value.resetFields();
};

</script>

<style scoped lang="scss"></style>